<template>
  <div class="content">
    <nav-title title="离职申请"/>
    <div class="list-box">
      <router-link tag="div" to="/dimissionDetail">
        <div class="line">
          <div class="decorate">
            <img src="./image/u25.png" alt="">
            <div></div>
          </div>
          <div class="text-box">
            <div class="text">李四发起 <span>离职申请流程</span></div>
            <div class="time">4月20日 &nbsp;18:30</div>
          </div>
          <div class="state">
            <img src="./image/u27.png" alt="">
          </div>
          <div class="icon">
            >
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'dimission'
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .content {
    font-size: 14px;
    .list-box {
      background-color: #cccccc;
      height: 100%;
      padding: 10px 5px;
      .line {
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 85px;
        .decorate {
          flex: 2;
          height: 60px;
          position: relative;
          div {
            position: absolute;
            width: 1px;
            margin-left: 20px;
            background-color: #cccccc;
            height: 45px;
            margin-top: -4px;
          }
        }
        .text-box {
          flex: 8;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-content: space-between;
          text-align: left;
        }
        .state {
          flex: 3;
          display: flex;
          align-items: flex-start;
          img {
            margin-top: -50%;
          }
        }
        .icon {
          flex: 4;
          font-size: 36px;
          font-weight: 500;
        }
      }
    }
  }
</style>
